<template>
  <footer>
    <ul class="footer-wrap">
      <router-link
        v-for="navItem in navList"
        :key="navItem.id"
        :to="navItem.path"
        class="footer-item"
        :class="{ active: $route.path === navItem.path }"
      >
        <i :class="navItem.icon" class="ico"></i>
        <span class="nav">{{ navItem.name }}</span>
      </router-link>
    </ul>
  </footer>
</template>

<script>
export default {
  name: 'NavFooter',

  data () {
    return {
      navList: [
        { id: 1, path: '/', name: '首页', icon: 'icon-meituan' },
        { id: 2, path: '/search', name: '搜索', icon: 'icon-sousuo' },
        { id: 3, path: '/order', name: '订单', icon: 'icon-dingdan' },
        { id: 4, path: '/my', name: '我的', icon: 'icon-my' }
      ]
    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
footer
  width 100%
  background-color #fff
  top-border-1px($bc)
  position fixed
  bottom 0
  overflow hidden
  .footer-wrap
    display flex
    justify-content space-around
    align-center center
    .footer-item
      width 25%
      padding 10px 0
      display flex
      flex-direction column
      text-align center
      color #aaa
      &.active
        color $green
      .nav
        padding-top 10px
      .ico
        font-size 20px
</style>
